<template>
    <div class="home-nav">
        <div>
            <img src="@/assets/logo.png"  style="width: 80px;height: 55px;">
        </div>
        <div class="home-title">星晖启航线上平台</div>
        <div class="home-bar">
            <div class="home-bar-element" @click="Router.homePage"
                :style="{ 'color': Router.home ? '#bfdbfe' : 'black' }">首页</div>
            <div class="home-bar-element" @click="Router.purchasePage"
                :style="{ 'color': Router.purchase ? '#bfdbfe' : 'black' }">商城</div>
            <div class="home-bar-element" @click="Router.dataPage"
                :style="{ 'color': Router.data ? '#bfdbfe' : 'black' }">个人中心</div>
            <div class="home-bar-element" @click="Router.uploadPage"
                :style="{ 'color': Router.upload ? '#bfdbfe' : 'black' }">上传课程</div>
            <div class="home-bar-element" @click="Router.openLogin">登录</div>
            <div class="home-bar-element" @click="Router.openSign">注册</div>
        </div>
    </div>
  
     
    <div v-if="Router.showSign === true" class="popup">
        <div class="popup-content">
            <div @click="Router.closeSign" style="margin-left: 95%;background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>

 
  <div v-if="Router.showLogin === true" class="popup">
        <div class="popup-content">
            <div @click="Router.closeLogin" style="margin-left: 95%; background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>
  
    <div class="body">
        <div class="contain">
            <div style="display: flex;">
                <span class="course-name-title">{{ information.name }}</span>
                <span class="course-name-title" style="left: 73%;position: absolute;">相关推荐</span>
            </div>
            <div class="course-video">
                <video ref="videoElement" class="video-js vjs-default-skin" @click="toggleVideo"></video>
            </div>
            <div class="reccommend">
                <div>
                    <img src="@/assets/推荐1.png" class="reccommend-video">
                </div>
                <div>
                    <img src="@/assets/推荐2.png" class="reccommend-video">
                </div>
                <div>
                    <img src="@/assets/推荐3.png" class="reccommend-video">
                </div>
                <div>
                    <img src="@/assets/推荐4.png" class="reccommend-video">
                </div>
                <div>
                    <img src="@/assets/推荐5.png" class="reccommend-video">
                </div>
                <div>
                    <img src="@/assets/推荐1.png" class="reccommend-video">
                </div>
            </div>

            <div class="course-iconNav">
<div v-if="information.adore===false"  style="display: flex;">
    <img src="@/assets/未点赞.png" class="icon-img" @click="Adore" >
    {{ information.adoreNumber }}</div>
    <div v-if="information.adore===true"  style="display: flex;">
    <img src="@/assets/点赞量图标.png" class="icon-img" @click="disAdore">
    {{ information.adoreNumber }}</div>
    <div v-if="information.collect===false"  style="display: flex;" >
    <img src="@/assets/未收藏.png" class="icon-img" @click="Collect">
    {{ information.collectNumber }}</div>
    <div v-if="information.collect===true"   style="display: flex;">
    <img src="@/assets/收藏量图标.png" class="icon-img" @click="disCollect">
    {{ information.collectNumber }}</div>
    <div v-if="information.download===false"  style="display: flex;" >
    <img src="@/assets/未下载.png" class="icon-img" @click="Download">
  {{ information.downloadNum }}</div>
    <div v-if="information.download===true"  style="display: flex;" >
    <img src="@/assets/下载量图标.png" class="icon-img" @click="disDownload">
    {{ information.downloadNum }} </div>
    <div v-if="information.share===false"   style="display: flex;" >
    <img src="@/assets/未转发.png" class="icon-img" @click="Share">
    {{ information.shareNumber}}</div>
    <div v-if="information.share===true"   style="display: flex;">
    <img src="@/assets/转发量图标.png" class="icon-img" @click="Share">
    {{ information.shareNumber}} </div>

                <div>
                <input placeholder="发送弹幕" class="review" v-model="newBarrage" @keyup.enter="addBarrage" />
                <div v-for="(item, index) in barrageArray" :key="index" class="barrage-item">
                    <span class="username">{{ item }}</span>
                </div>
            </div>
            </div>

        </div>

    </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import videoSrc from '@/assets/测试视频.mp4';
import router from '@/router/index';
import { RouterData } from '../home/home';
import { messageData } from '../upload/upload';
import { BarrageData } from './Course';
const { barrageArray, newBarrage, addBarrage, Adore, Collect, disAdore,
    disCollect,Download,Share,disDownload, } = BarrageData();
const { Router } = RouterData();
const { information } = messageData();
const videoElement = ref(null);
let player = null;

onMounted(() => {
    player = videojs(videoElement.value, {
        controls: true,
        muted: false,
        autoplay: true,
        preload: 'auto',
        width: '1100px',
        height: '800px',
        sources: [
            {
                src: videoSrc,
                type: 'video/mp4',
            },
        ],
        playbackRates: [0.5, 1, 1.5, 2],
    });

    player.on('ended', () => {
        console.log('Awww...over so soon?!');
    });
   
});

onBeforeUnmount(() => {
    if (player) {
        player.dispose();
    }
});
</script>
<style scoped>
@import './course.scss'
</style>